import React, {Component} from "react";
import {Tree, Button, message} from "antd";
import auth from "../../common/auth";
const TreeNode = Tree.TreeNode;

export default class RoleFuncForm extends Component {
    state = {
        funcData: [],
        isexpand: true,
        selected: false,
        expandedKeys: [],
        autoExpandParent: true,
        selectedKeys: [],
        selectedNodes: {},
        checkedKeys: [],
        saveLoading: false,
        reLoading:false,
        data: this.props.init.data,
    }

    fetchRoleFunc(params={roleId: this.state.data.roleid}) {
        auth.fetch('/sys/role/findFuncByRoleId', params, (res) => {
            if (res.result == "0") {
              let checkedKeys =[];
              let expandedKeys = [];
              const loop = data => data.map((item) => {
                if(item.checked){
                  checkedKeys.push(item.id);
                }
                if (item.children) {
                    expandedKeys.push(item.id);
                    loop(item.children);
                }
              });
              loop(res.data);
                this.setState({
                    funcData: res.data,
                    checkedKeys:checkedKeys,
                    expandedKeys:expandedKeys,
                    reLoading:false
                });
                console.log(checkedKeys);
            } else {
                message.error(res.message, 10);
            }
        });
    }

    handleBtnSave() {
        //TODO 最后增加是否修改判断
        this.setState({saveLoading: true});
        let params = {
            roleId: this.state.data.roleid,
            funcId: this.state.checkedKeys.join(",")
        }
        auth.fetch('/sys/role/saveRoleFunc', params, (result) => {
            this.setState({saveLoading: false});
            if (result.result == '0') {
                message.success(result.message);
                this.fetchRoleFunc();
            } else {
                message.error(result.message, 10);
            }
        });
    }
    handleBtnReload(){
      this.setState({reLoading:true});
      this.fetchRoleFunc();
    }
    componentDidUpdate(nextProps, nextState) {
    }

    componentDidMount() {
        this.fetchRoleFunc();
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.init.data.roleid != this.state.data.roleid){
            this.setState({data:nextProps.init.data});
            this.fetchRoleFunc({roleId:nextProps.init.data.roleid});
        }
    }
    onCheck(checkedKeys) {
        this.setState({checkedKeys});
    }
    onSelect(selectedKeys, info) {
      this.setState({ selectedKeys });
    }
    onExpand(treeNode, expand, expandedKeys) {
        this.setState({
            expandedKeys: expandedKeys
        });
    }

    render() {
        const loop = data => data.map((item) => {

            if (item.children) {
                return <TreeNode key={item.id}  funcid={item.id} title={item.text} icon={item.icon} >{loop(item.children)}</TreeNode>;
            }
            return <TreeNode key={item.id} funcid={item.id}  title={item.text}icon={item.icon} />;
        });
        let treeNodes = loop(this.state.funcData);
        return (
            <div>
                <Button type="primary" icon="save" loading={this.state.saveLoading} size="small" className="btn-divider"
                        onClick={this.handleBtnSave.bind(this)}>保存</Button>
                <Button type="primary" icon="reload" loading={this.state.reLoading} size="small" className="btn-divider"
                        onClick={this.handleBtnReload.bind(this)}>刷新</Button>
                    <Tree checkable checkStrictly multiple autoExpandParent={this.state.autoExpandParent}  expandedKeys={this.state.expandedKeys}
                      onCheck={this.onCheck.bind(this)} checkedKeys={this.state.checkedKeys} >
                    {treeNodes}
                </Tree>
            </div>

        );
    }
};
